<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="wrapper">
        <h1>LOCAL TAPARS</h1>
        <p></p>
        <ul class="plates">
            <li>loading Tapes</li>
        </ul>
        <form action="/login" method="post" class="add-items" name="plate-form" >
            <!-- 阻止表单提交以验证数据的正确性后再提交 -->
            <!-- required属性使表单的状态为必填，不填内容不能提交 -->
            <input type="text" name="item" placeholder="Item Name" required>
            <input type="submit" value="+ Add Item">
        </form>
    </div>

    <script>
        let plates = [];

        const oForm = document.forms['plate-form'];

        
        // 增加事件监听？
        oForm.addEventListener('submit',function(event){
            // 将数据存储在storage中要先阻止表单提交
            event.preventDefault(); // 使表单不会执行默认动作？

            let text = (this.querySelector('[name=item]')).value; // 获取表单节点


            plate = {
                text,
                done:false
            }
            plates.push(plate);

            // 将数据存储在Storage中的api：localStorage.setItem(),存的数据都要转换为字符串；
            localStorage.setItem('items',JSON.stringify(plates)); // JSON.stringify() 将一个json数据转换为字符串

            // 重置表单以清空数据
            this.reset();   

            loadData();

        })


        // 将storage中的数据更新到界面
        function loadData(){
             // 将数据从storage中取出，JSON.parse()？
            let items = localStorage.getItem('items')

            if(!items){
                return ;
            }
            plates = JSON.parse(items);

            if(!plates.length){
                return ;
            }

            // array.map()的作用 ?

            document.querySelector('.plates').innerHTML = plates.map( (plate,index) => `
                <li>
                    <input type="checkbox" 
                    data-index="${index}"
                    id="item${index}" ${ plate.done?"checked" :""} />
                    <label for="item${index}"> ${plate.text}</label>
                </li>
            `).join(' ')           
        }

        // 勾选checkbook时更新storage里的数据
        function toggleDone(e){
            const el = e.target;
            const index = el.dataset.index;

            

            plates[index].done = !plates[index].done;
            localStorage.setItem('items',JSON.stringify(plates));   

        }


        // 
        window.onload = function(){
           loadData();

           console.log('storage length:',localStorage.length);
           console.log('存入storage',localStorage.setItem('liu','yu'));
           console.log(localStorage.getItem('liu'));

           localStorage.liu = 'qiang';

           console.log(localStorage.liu);

           const itemList = document.querySelector('.plates');
           // 
           itemsList.addEventListener('click',toggleDone);

           

        }
    </script>
</body>
</html>